<template>
  <div id="operation" style="width: 1100px;margin-left: 15%">
    <div style="position:absolute;margin-top: 5px;margin-left: 60%;z-index: 1">
      <el-button type="success" size="mini">添加作业</el-button>
      <el-button type="success" size="mini" @click="toQuestion()">题目库</el-button>
    </div>
    <el-tabs v-model="activeName" style="z-index: -1">
      <el-tab-pane label="我的作业" name="first">
        <div style="margin-top: 30px">
          <ul style="list-style: none;padding: 0;">
            <li v-for="(operation,index) in array"
                style="margin-left: 20px;width: 320px;padding-bottom: 20px;display:inline-block;padding-right: 20px">
              <div style="border: 1px solid #b3b3b3;padding: 20px;">
                <p style="font-size: 20px">{{ operation.name }}</p>
                <p style="font-size: 10px">开始时间：{{ operation.gmt_start }}</p>
                <p style="font-size: 10px">截止时间：{{ operation.gmt_end }}</p>
                <p style="font-size: 10px">作业状态：{{ operation.job_status }}</p>
              </div>
              <div style="border: 1px solid #b3b3b3;height: 40px;padding: 10px;background-color: #e8eeda">
                <el-button type="success" size="mini" style="float: right;margin-top: 5px">{{operation.value }}</el-button>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待批作业" name="second">
        <div>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="title"
              label="作业标题"
              width="380">
            </el-table-column>
            <el-table-column
              prop="pending"
              label="待批">
            </el-table-column>
            <el-table-column
              prop="gmt_start"
              label="互评开始日期">
            </el-table-column>
            <el-table-column
              prop="gmt_end"
              label="互评截止日期">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Operation",
  data() {
    const operation = {
      name: '第一次作业',
      gmt_start: '2021-12-1 00:00',
      gmt_end: '2021-12-7 00:00',
      job_status: '未提交',
      value: '做作业'
    }
    return {
      activeName: 'first',
      array: Array(10).fill(operation),
      tableData: [{
        title: '第一次作业',
        pending: '0',
        gmt_start: '2021-12-1 00:00',
        gmt_end: '2021-12-7 00:00',
      }, {
        title: '第二次作业',
        pending: '0',
        gmt_start: '2021-12-1 00:00',
        gmt_end: '2021-12-7 00:00',
      }]
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    toQuestion(){
      this.$router.push('/Question')
    }
  }
}
</script>

<style scoped>
p {
  margin: 0px;
  padding-bottom: 10px;
}
</style>
